<!-- author: xuett -->
<!-- date: 2025-07-29 11:09:49 -->
<!-- description: 办理弹窗 -->
<template>
  <el-dialog v-model="visible" title="办理" width="800px" top="5vh" append-to-body>
    <div class="form-box">
      <el-form>
        <el-row>
          <el-col :span="24">
            <el-form-item label="主体名称" prop="orgName">{{ curDissentInfo.ztName }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="统一代码" prop="orgName">{{ curDissentInfo.ztCode }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报告编号" prop="orgName">{{ curDissentInfo.reportNo }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="问题说明" prop="orgName">{{ curDissentInfo.userRemark }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 处罚条目 -->
      <el-collapse expand-icon-position="left">
        <el-collapse-item v-for="cf in cfList" :name="cf.detailId">
          <template #title>
            <div class="collapse-title">
              <div class="left-title">{{ createCfTitle(cf) }}</div>
              <el-button
                v-if="(curDissentInfo.status == '0' || curDissentInfo.status == '1') && cf.status == null"
                type="primary"
                icon="Position"
                @click.stop="handleTransfer(cf)"
                v-hasPermi="['credit:dissent:forward']"
              >
                转办
              </el-button>
            </div>
          </template>
          <template v-if="cf.field == '公安' && cf.scope == '刑事裁判'">
            <table class="cf-table">
              <tbody>
                <tr>
                  <td>犯罪记录</td>
                  <td colspan="3">{{ cf.data['犯罪记录'] }}</td>
                </tr>
                <tr>
                  <td>佐证材料</td>
                  <td colspan="3">{{ cf.evidenceName }}</td>
                </tr>
                <tr v-if="cf.status == '1' || cf.status == '2'">
                  <td>{{ cf.status == '1' ? '驳回意见' : '完成备注' }}</td>
                  <td colspan="3">{{ cf.remark ? cf.remark : '' }}</td>
                </tr>
              </tbody>
            </table>
          </template>
          <template v-else>
            <table class="cf-table">
              <tbody>
                <tr v-for="i in Math.ceil(xydzCfObj[cf.scope].length / 2)">
                  <td style="width: 150px">{{ xydzCfObj[cf.scope][i * 2 - 2].name }}</td>
                  <td>{{ cf.data[xydzCfObj[cf.scope][i * 2 - 2].prop] ? cf.data[xydzCfObj[cf.scope][i * 2 - 2].prop] : '' }}</td>
                  <template v-if="i * 2 <= xydzCfObj[cf.scope].length">
                    <td style="width: 150px">{{ xydzCfObj[cf.scope][i * 2 - 1].name }}</td>
                    <td>{{ cf.data[xydzCfObj[cf.scope][i * 2 - 1].prop] ? cf.data[xydzCfObj[cf.scope][i * 2 - 1].prop] : '' }}</td>
                  </template>
                </tr>
                <tr>
                  <td>佐证材料</td>
                  <td colspan="3" style="color: #409eff; cursor: pointer">
                    <div v-for="(name, index) in cf.evidenceName.split(';')" :key="index" @click="previewEvidence(cf, index)">
                      {{ name }}
                    </div>
                  </td>
                </tr>
                <tr v-if="cf.status == '1' || cf.status == '2'">
                  <td>{{ cf.status == '1' ? '驳回意见' : '完成备注' }}</td>
                  <td colspan="3">{{ cf.remark ? cf.remark : '' }}</td>
                </tr>
              </tbody>
            </table>
          </template>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-divider border-style="dotted" />
    <template #footer>
      <div class="dialog-footer" style="display: flex; justify-content: center">
        <el-button
          v-if="curDissentInfo.status == '0' || curDissentInfo.status == '1'"
          type="danger"
          icon="Close"
          @click="handleReject()"
          v-hasPermi="['credit:dissent:edit']"
          >驳回</el-button
        >

        <el-button
          v-if="curDissentInfo.status == '0' || curDissentInfo.status == '1'"
          type="success"
          icon="CircleCheck"
          @click="handleComplete()"
          v-hasPermi="['credit:dissent:edit']"
          >完成</el-button
        >
      </div>
    </template>
  </el-dialog>
  <!-- 转办机构选择 -->
  <orgDialog ref="orgDialogRef" @selectOrg="confirmTransfer"></orgDialog>
  <!-- 驳回/完成 意见 -->
  <el-dialog v-model="dialogVisible" :title="operateTitle" width="800px" top="5vh" append-to-body>
    <el-row>
      <el-input v-model="remark" :autosize="{ minRows: 2 }" type="textarea" maxlength="500" placeholder="请输入" />
    </el-row>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="confirmSubmit">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="SelectUser" lang="ts">
import { DissentVO, cfItemVo } from '@/api/xydz/dissent/types';
import { getDissentDetail, dissentTransfer, rejectOrComplete } from '@/api/xydz/dissent/index';
import orgDialog from './org-dialog.vue';
import xydzCfList from '@/assets/js/xydz_cf';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const $emit = defineEmits(['updateList']);

const orgDialogRef = ref<InstanceType<typeof orgDialog>>();

const state = reactive({
  curDissentInfo: {} as DissentVO,
  cfList: [] as cfItemVo[],
  visible: false,
  dialogVisible: false,
  operateTitle: '',
  remark: ''
});
const { curDissentInfo, cfList, visible, dialogVisible, operateTitle, remark } = toRefs(state);

const show = (row: DissentVO) => {
  state.curDissentInfo = row;
  state.visible = true;
  getDetail(row.dissentId);
};

//获取详情
const getDetail = (dissentId: string) => {
  getDissentDetail(dissentId).then((res) => {
    res.forEach((item: cfItemVo) => {
      item.data = item.data ? JSON.parse(item.data) : {};
    });
    state.cfList = res;
  });
};

//生成处罚条目title
const createCfTitle = (row) => {
  let title = '';
  switch (row.scope) {
    case '行政处罚':
      title = `决定文书号(${row.data.cf_wsh})`;
      break;
    case '行政强制':
      title = `决定文书号(${row.data.xz_qz_jdwsh})`;
      break;
    case '刑事裁判':
      title = row.data.hrijnsowti ? `案号(${row.data.hrijnsowti})` : '(公安)刑事裁判';
      break;
    case '严重失信主体名单':
      title = `${row.data.sxmdzl}(${row.data.lrrq})`;
      break;
  }
  return row.scope + '———' + title;
};

//生成处罚条目内容
let xydzCfObj = {};
xydzCfList.forEach((item) => {
  xydzCfObj[item.name] = item.propsList;
});
const createCfContent = (row) => {
  let html = '';
  let propsList = xydzCfObj[row.scope];
  propsList.forEach((item, index) => {
    html += index % 2 ? '' : '<tr>';
    html += `
        <td style="width: 150px">${item.name}</td>
        <td >${row.data[item.prop] ? row.data[item.prop] : ''}</td>`;
    html += index % 2 ? '</tr>' : '';
  });
  if (propsList.length % 2) {
    html += '</tr>';
  }
  html += `
    <tr>
      <td>佐证材料</td>
      <td colspan="3">${row.evidenceName}</td>
    </tr>`;
  if (row.status == '1' || row.status == '2') {
    html += `
      <tr >
        <td>${row.status == '1' ? '驳回意见' : '完成备注'}</td>
        <td colspan="3">${row.remark ? row.remark : ''}</td>
      </tr>`;
  }

  return html;
};

// 转办
const transferCfItem = ref<cfItemVo>();
const handleTransfer = (row: cfItemVo) => {
  transferCfItem.value = row;
  orgDialogRef.value.show();
};

//确认转办
const confirmTransfer = async (orgList) => {
  let title = createCfTitle(transferCfItem.value);
  await proxy?.$modal.confirm(`是否确认将处罚条目《${title}》转办给“${orgList[0].orgName}”？`);
  dissentTransfer({
    'dissentId': transferCfItem.value.dissentId,
    'id': transferCfItem.value.id,
    'status': transferCfItem.value.status,
    'orgId': orgList[0].orgId,
    'orgName': orgList[0].orgName,
    'phone': orgList[0].phone
  }).then((res) => {
    if (res.code == 200) {
      proxy?.$modal.msgSuccess('转办成功');
      // closeDialog();
      getDetail(state.curDissentInfo.dissentId);
      $emit('updateList');
    } else {
      proxy?.$modal.msgError(res.msg);
    }
  });
};

// 驳回
const handleReject = async () => {
  state.remark = '';
  state.operateTitle = '驳回意见';
  state.dialogVisible = true;
};

// 完成
const handleComplete = async () => {
  state.remark = '';
  state.operateTitle = '完成备注';
  state.dialogVisible = true;
};

//确认驳回/完成
const confirmSubmit = () => {
  let params = { type: state.operateTitle == '驳回意见' ? '2' : '3', remark: '' };
  if (state.remark) {
    params.remark = state.remark;
  }
  rejectOrComplete(state.curDissentInfo.dissentId, params).then((res) => {
    if (res.code == 200) {
      proxy?.$modal.msgSuccess('操作成功');
      state.dialogVisible = false;
      closeDialog();
    } else {
      proxy?.$modal.msgError(res.msg);
    }
  });
};

//关闭弹窗
const closeDialog = () => {
  state.visible = false;
  $emit('updateList');
};

//预览佐证材料
const previewEvidence = (row, index) => {
  if (row.evidence) {
    let idList = row.evidence.split(';');
    proxy?.$preview.oss(idList[index]);
  }
};

// 暴露
defineExpose({
  show
});
</script>

<style lang="scss" scoped>
.form-box {
  width: 100%;
}
.collapse-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cf-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #f6f6f6;
  :deep(td) {
    padding: 5px;
    border: 1px solid #666;
    font-size: 14px;
    &:nth-child(odd) {
      font-weight: bold;
    }
  }
}
</style>
